<template>
<div>
  <el-card class="box-card">
    <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="编号"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="部门名称"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="left">
          <template slot="header">
            <el-button type="info" round @click="addVisible = true">新增部门</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog
        title="新增部门页面"
        :visible.sync="addVisible"
        top="10px"
        width="50%">
        <el-input
          placeholder="请输入内容"
          v-model="add.id"
          clearable>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="add.name"
          clearable>
        </el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="addVisible = false">取 消</el-button>
    <el-button type="primary" @click="adds">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="修改部门页面"
        :visible.sync="dialogVisible"
        top="10px"
        width="50%">
        <el-input
          placeholder="请输入内容"
          v-model="input.id"
          clearable>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="input.name"
          clearable>
        </el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </el-card>
</div>
</template>

<script>
export default {
  name: 'dept',
  data () {
    return {
      tableData: [],
      dialogVisible: false,
      addVisible: false,
      input: [],
      add: [
        {
          id: '',
          name: ''
        }
      ]
    }
  },
  mounted () {
    this.listdept()
  },
  methods: {
    async adds () {
      const { data: res } = await this.$axios.post('/add', {
        id: this.add.id,
        name: this.add.name
      })
      if (res === true) {
        this.addVisible = false
        this.listdept()
      }
    },
    async update () {
      const { data: res } = await this.$axios.post('/update', this.input)
      console.log(res)
      if (res === true) {
        this.dialogVisible = false
        this.listdept()
      } else {
        this.$message({
          message: '抱歉,亲编辑时遇到了一些问题',
          type: 'warning'
        })
      }
    },
    async listdept () {
      const { data: res } = await this.$axios.post('/listdept')
      this.tableData = res.depts
    },
    async handleEdit (row) {
      this.dialogVisible = true
      const { data: res } = await this.$axios.post('/upid', {
        id: row
      })
      this.input = res
    },
    async handleDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/deldept', {
          id: row
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.listdept()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
